<template>
  <div id="liveZone">
    <!--  支付类型选择 -->
    <div class='mc1' v-show='isdocType' @click.stop='isdocType=false'>
      <div class='duration' @click.stop='isdocType=true'>
        <div class='top'>
          <a @click.stop='isdocType=false'>取消</a>
          <a @click.stop='sureDocType'>确定</a>
        </div>
        <mt-picker :slots="slotsDocType" :valueKey="'numbering'?'numbering':''" @change="onValuesChangeDocType"></mt-picker>
      </div>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>课程专区</div>
    </header>
    <nav>
      <div class="active" @click='tabToggle(0,sentPage,"click")'>
        免费
      </div>
      <div @click='tabToggle(1,sentPage,"click")'>
        收费
      </div>
    </nav>
    <!-- 学习专区 -->
    <ul class="freeList list">
      <Loadmore :top-method="Top" :bottom-method="Bottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <div class='mc' v-if="list.length<1">
          <p>暂无数据!</p>
        </div>
        <li v-for="(item,index) in list" :key='index' v-if="list.length>0" style="padding:10px">
          <a @click=goNext(item)>
            <img :src="item.course_pic" width="140" height="140" />
            <div class="kind">
              <h3>课程题目:{{item.course_name}}</h3>
              <div v-if='item.username'>
                主讲老师: {{item.username}}
              </div>
              <p>
                <img src="../../image/video.png" alt="">
                <i>{{item.iffree=='free'?'免费':"￥"+item.charge+""}}</i>
              </p>
            </div>
          </a>
        </li>

        <li class='oddLi' v-if='oddLi' style="min-height: 240px">
        </li>

      </Loadmore>
    </ul>

  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        isdocType: false,
        id: '',
        charge: '',
        slotsDocType: [{
          values: ['微信', '支付宝'],
          className: 'slot1',
          textAlign: 'center'
        }, ],

        i: '0',
        list: [],
        sentPage: {
          page: 1, //分页累加
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        oddLi: false, //解决上拉刷新字显示位置问题 当li为奇数时为true
        Type: 'free',
      }
    },
    components: {
      Loadmore
    },
    methods: {
      goBack() {
        this.$router.push({
          name: 'home'
        });
      },
      onValuesChangeDocType(picker, values) {
        this.valuesDocType = values[0];
      },
      sureDocType() {
        console.log(this.valuesDocType)
        if (this.valuesDocType == '微信') {
          this.isdocType = false;
          var params = {
            courseid: this.id,
            userid: localStorage.getItem('loginMobile'),
            price: this.charge
          }
          this.$api.post(this.$api.baseURLSchool, "update_user_order/course_order", params, r => {
            if (r.data.ret == 1) {
              const data = {
                order_num: r.data.order_num,
                total_fee: this.charge,
                des: '视频'
              };
              this.$api.post(this.$api.baseURL2, "/android_wxpay", data, r => {
                var params = {
                  partnerid: r.data.mch_id, // merchant id 
                  prepayid: r.data.prepay_id, // prepay id 
                  noncestr: r.data.nonce_str, // nonce 
                  timestamp: r.data.timestamp, // timestamp 
                  sign: r.data.sign, // signed string 
                };
                Wechat.sendPaymentRequest(params, function () {
            this.$utils._toast('支付成功');
          }, function (reason) {
            this.$utils._toast(reason);
          });
              }, err => {
                console.log(err);
              }, false, false)
            }
          }, err => {
            console.log(err);
          })


        } else if (this.valuesDocType == '支付宝') {
          //   支付宝支付
          this.isdocType = false;
          var params = {
            courseid: this.id,
            userid: localStorage.getItem('loginMobile'),
            price: this.charge
          }
          this.$api.post(this.$api.baseURLSchool, "update_user_order/course_order", params, r => {
            if (r.data.ret == 1) {
              const data = {
                order_num: r.data.order_num,
                amount: this.charge,
                subject: '视频'
              };
              this.$api.post(this.$api.baseURL2, "/alipay_app", data, r => {
            var params = r.data.data;
            cordova.plugins.alipay.payment(params, function () {
              this.$utils._toast('支付成功');
            }, function (reason) {
              this.$utils._toast(reason);
            });
          }, err => {
            console.log(err);
          }, false, false)
            }
          }, err => {
            console.log(err);
          })
        }
      },

      goNext(item) {
        if (item.iffree == 'charge' && item.charge != 0) {
          this.$api.get(this.$api.baseURLSchool, "view_detail/course_order?userid=" + localStorage.getItem(
              'loginMobile') +
            "&courseid=" + item.id + "", {}, r => {
              if (r.data.ret == 1) {
                if (r.data.info.status == 'pay') {
                  this.$router.push({
                    name: 'homeDetail',
                    query: {
                      id: item.id,
                      poster: item.course_pic
                    }
                  });
                } else {
                  this.id = item.id;
                  this.charge = item.charge;
                  this.isdocType = true;
                }
              } else if (r.data.ret == 0) {
                var params = {
                  courseid: item.id,
                  userid: localStorage.getItem('loginMobile'),
                  price: item.charge
                }
                // this.order_num = r.data.order_num;
                this.id = item.id;
                this.charge = item.charge;
                this.isdocType = true;
              }
            }, err => {
              console.log(err);
            })
        } else {
          this.$router.push({
            name: 'homeDetail',
            query: {
              id: item.id,
              poster: item.course_pic
            }
          });
        }
      },
      //判断入口 是免费的还是收费的 获取对应状态的订单列表
      tabToggle(i, params, click) { //0免费 1收费
        this.list = [];
        this.sentPage.page = 1;
        $('nav div').eq(i).addClass('active').siblings().removeClass();
        this.i = i;
        // 免费
        if (i == 0) {
          this.Type = "free"
          this.getFreeData(this.sentPage);
        }
        // 收费
        if (i == 1) {
          this.Type = 'charge';
          this.list = [];
          this.getFreeData(this.sentPage);
        }
      },
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      //获取课程列表免费
      getFreeData(params) {
        $('nav div').eq(this.i).addClass('active').siblings().removeClass();
        $('.nav div').eq(0).addClass('active').siblings().removeClass();
        // 第一个参数是root--baseurl
        var that = this;
        params = {
          page: this.sentPage.page,
          queryor: {
            course_type: '1,-1'
          }
        }
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_course_user/0?iffree=" + that.Type, params, r => {
          this.totalNum = r.data.records; //总数据
               // 登录拦截
               if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }
          if (this.sentPage.page == 1) {
            that.list = r.data.rows;
          } else {
            that.list = that.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0) {
            that.$utils._toast("暂无更多数据");
          }
          if (this.totalNum % 2 != 0) {
            this.oddLi = true;
          } else {
            this.oddLi = false;
          }
        }, err => {
          console.log(err);
        })
      },

      Top() {
        this.sentPage.page = 1;
        if (this.i == 0) {
          this.Type = 'free'
          setTimeout(() => {
            this.getFreeData(this.sentPage);
            this.allLoaded = false;
          }, 20);
        } else {
          this.Type = 'charge'
          setTimeout(() => {
            this.getFreeData(this.sentPage);
            this.allLoaded = false;
          }, 20);
        }
        this.$refs.loadmore.onTopLoaded();
      },
      Bottom() {
        (this.sentPage.page) ++;
        if (this.i == 0) {
          this.Type = 'free'
          setTimeout(() => {
            this.getFreeData(this.sentPage);
          }, 20);
        } else {
          this.Type = 'charge'
          setTimeout(() => {
            this.getFreeData(this.sentPage);
          }, 20);
        }
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      // 支付
      goPay(item) {
        // 微信h5支付
        const data = {
          order_num: item.order_num
        };
        // 支付宝
        this.$api.post(this.$api.baseURL2, "alipay", data, r => {
          console.log(r);
          window.location.href = r.data.url;
        }, err => {
          console.log(err);
        }, false, false)
      },
      //记录滚动位置
      setScrollTop(e) {
        localStorage.setItem("scrollTop", e.target.scrollTop);
      },

    },
    created() {
      this.getFreeData(this.sentPage);
    },
    //history模式下 返回会触发
    activated() {
      // console.log(localStorage.getItem("scrollTop"));
      if (localStorage.getItem("scrollTop")) {
        $('.liveList').scrollTop(localStorage.getItem("scrollTop"));
      }
    },
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  .mc1 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 99;

    .duration {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 235px;
      background: #fff;

      div.top {
        display: flex;
        height: 45px;
        line-height: 45px;
        background: linear-gradient(to bottom, #7ad8ad,  #67b296);
        padding: 0 25px;

        a {
          flex: 1;
          font-size: 17px;
          color: #fff;

          &:last-child {
            text-align: right;
          }
        }
      }
    }
  }


  #liveZone ul.freeList li {
    display: flex;

    justify-content: center;
    min-height: 200px;

    .kind {
      min-height: 85px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      p {
        display: flex;
        justify-content: space-between;
        align-items: center;

        i {
          display: inline-block;
          background: #52452b;
          color: #fee361;
          width: 0.5rem;
          height: 0.21rem;
          font-size: 11px;
          border-radius: 0.21rem;
          line-height: 0.21rem;
          text-align: center;
        }
      }


    }
  }

  .tit {
    min-height: 115px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    p {
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        display: inline-block;
        background: #52452b;
        color: #fee361;
        width: 0.5rem;
        height: 0.21rem;
        font-size: 11px;
        border-radius: 0.21rem;
        line-height: 0.21rem;
        text-align: center;
      }
    }

  }

  .nav {
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-around;
    height: 0.4rem;
    line-height: 0.4rem;
    color: #8d8d8d;
    font-size: 13px;
    font-weight: 600;

    .active {
      color: #3dc983;
      font-size: 14px;
      border-bottom: 2px solid #3dc983;
    }
  }

  nav {
    background: #fff;
    width: 2.32rem;
    height: 0.3rem;
    line-height: 0.3rem;
    border-radius: 0.15rem;
    margin: 0.21rem auto;
    margin-bottom: 0.1rem;
    letter-spacing: 10px;
    display: flex;
    justify-content: space-between;
    color: #9e9e9e;
    padding: 0rem 0.05rem;

    div {
      width: 50%;
      text-align: center
    }

    .active {
      background: #fdd71a;
      width: 1.2rem;
      height: 0.24rem;
      line-height: 0.24rem;
      text-align: center;
      border-radius: 0.12rem;
      color: #fff;
      margin-top: 0.03rem;
    }
  }

  .mint-loadmore-text {
    color: transparent;
    display: none;
  }

</style>
